import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {getRealSize, Touchable} from '../../utils';
import ThemeStyles from '../../styles';
import IconFont from '../../resource/iconfont';
import {NativeViewGestureHandler} from 'react-native-gesture-handler';
import {I18n} from '../../reducers/intl';

class SheetHead extends React.Component {
  render() {
    const {onClose} = this.props;
    return (
      <NativeViewGestureHandler disallowInterruption={true}>
        <View style={Styles.sheetHead}>
          <View style={{width: 72}} />
          <IconFont name="molarzhedie" size={18} color="#DCDCDC" />
          <Touchable onPress={() => onClose()}>
            <View style={{width: 72}}>
              <Text style={Styles.headerLabel}>{I18n.t('button.close')}</Text>
            </View>
          </Touchable>
        </View>
      </NativeViewGestureHandler>
    );
  }
}

export default SheetHead;

const Styles = StyleSheet.create({
  sheetHead: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: getRealSize(15),
  },
  headerLabel: {
    color: ThemeStyles.Color.primary.color,
    textAlign: 'right',
    paddingVertical: getRealSize(6),
  },
  sheetContainer: {
    borderTopColor: ThemeStyles.Color.line.color,
    borderTopWidth: StyleSheet.hairlineWidth,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 12,
    },
    shadowOpacity: 0.58,
    shadowRadius: 16.0,

    elevation: 24,
  },
});
